<template>
    <div>
        <div class="top">
            <div class="left">
                头像
            </div>
            <div class="right">
                <p>{{ topList.username }}</p>
                <p style="display: flex; justify-content: space-evenly;align-items: center;">
                <p>最新工资基数</p>
                <p>入职时间{{ topList.timeOfEntry }}</p>
                <p>联系电话{{ topList.mobile }}</p>
                </p>
                <div style="display: flex;">
                    <p><span>本月不缴纳社保&nbsp;&nbsp;<el-switch v-model="value1" /></span></p>
                    <p style="margin: 0px 20px;"><span>本月不缴纳公积金&nbsp;&nbsp;<el-switch v-model="value2" /></span></p>
                </div>

            </div>
        </div>
        <div class="bottom">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>

                <el-form-item label="参保城市" prop="region">
                    <el-select v-model="ruleForm.region" :placeholder="topList1.providentFundCity">
                        <el-option :label="item.name" :value="item.name" v-for="item in city" :key="item.id" />
                        <!-- <el-option label="Zone two" :value="beijing" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="参保类型" prop="region">
                    <el-select v-model="kh" :placeholder="kh">
                        <el-option :label="item" :value="item" v-for="(item, index) in select" :key="index" />
                        <!-- <el-option label="Zone two" value="beijing" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="户籍类型" prop="region">
                    <el-select v-model="citys" :placeholder="citys">
                        <el-option :label="item" :value="item" v-for="(item, index) in select1" :key="index" />
                        <!-- <el-option label="Zone two" value="beijing" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="社保基数" prop="name">
                    <el-input v-model="name" />
                </el-form-item>
                <el-form-item label="工伤比例" prop="name">
                    <el-input v-model="gs" />
                </el-form-item>
                <el-form-item label="社保缴纳" prop="name">
                    <p>
                        个人:
                        <el-input v-model="mySb" />
                    </p>
                    <p>
                        公司:
                        <el-input v-model="gsSb" />
                    </p>
                    <el-table :data="tableData" height="250" style="width: 100%">
                        <el-table-column prop="name" label="交费项目" />
                        <el-table-column prop="name" label="企业基数" />
                        <el-table-column prop="scaleCompany" label="企业比例" />
                        <el-table-column prop="address" label="企业比例">
                            <el-input v-model="name" />
                        </el-table-column>
                        <el-table-column prop="address" label="个人基数" />
                        <el-table-column prop="scalePersonal" label="个人比例" />
                        <el-table-column prop="address" label="个人缴纳">
                            <el-input v-model="name" />
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="社保备注" prop="desc">
                    <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item label="参保城市" prop="region">
                    <el-select v-model="ruleForm.region" :placeholder="topList1.providentFundCity">
                        <el-option :label="item1.name" :value="item1.name" v-for="item1 in city" :key="item1.id" />
                        <!-- <el-option label="Zone two" :value="beijing" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="社保基数" prop="name">
                    <el-input v-model="name" />
                </el-form-item>
                <el-form-item label="工伤比例" prop="name">
                    <el-input v-model="gs" />
                </el-form-item>
                <el-form-item label="工伤比例" prop="name">
                    <el-input v-model="gs" />
                </el-form-item>
                <el-form-item label="工伤比例" prop="name">
                    <p>
                        个人:
                        <el-input v-model="mySb" />
                    </p>
                    <p>
                        公司:
                        <el-input v-model="gsSb" />
                    </p>
                </el-form-item>
                <el-form-item label="社保备注" prop="desc">
                    <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getId, getCity, getDetail } from '../api/axios.js'
import { useRouter } from 'vue-router'
let city = ref([])
let topList = ref({})
let topList1 = ref({})
let topList2 = ref({})
let topList3 = ref({})
let select = ['首次开户', '非首次开户']
let select1 = ['本市城镇', '本市农村', '外阜城市', '外阜农村']
let name = ref('')
let gs = ref('')
let mySb = ref('')
let gsSb = ref('')
const value1 = ref(topList1.value.enterprisesPaySocialSecurityThisMonth == '1' ? true : false)
const value2 = ref(true)
const type = ref('')
const qyjs = ref('')
const qybl = ref('')
const qyjn = ref('')
const grjs = ref('')
const grjn = ref('')
interface RuleForm {
    name: string
    region: [],
    region1: [],
    region2: [],
    // region
    // name:''
}
let kh = ref(topList2.value == '1' ? '首次开户' : '非首次开户')
let citys = ref('')
let data = ref([])
let tableData = ref([])
let time = ref('')
let get = async () => {
    let res = await getId(ids.value)
    let res2 = await getDetail(ids.value)
    console.log(res2.data, 'res2');
    topList.value = res.data.data.user
    topList1.value = res.data.data.userSocialSecurity
    topList2.value = res.data.data.socialSecurityType
    topList3.value = res.data.data.householdRegistrationType
    name.value = topList1.value.socialSecurityBase
    gs.value = topList1.value.industrialInjuryRatio
    mySb.value = topList1.value.personalProvidentFundPayment
    gsSb.value = topList1.value.personalProvidentFundPayment
    time.value = topList1.value.timeOfEntry
    tableData.value=res2.data.data
    // type.value=topList1.value.
    console.log(topList1.value);
    let res1 = await getCity()
    city.value = res1.data.data
    console.log(res2.data.data
        , 'asdasdasdadas', name.value);
    if (topList3.value == '1') {
        citys.value = '本市城镇'
    } else if (topList3.value == '2') {
        citys.value = '本市农村'
    } else if (topList3.value == '3') {
        citys.value = '外阜城市'
    } else {
        citys.value = '外阜农村'
    }
}
let ids = ref('')
let router = useRouter()
onMounted(() => {
    let params = router.currentRoute.value.query
    console.log(params.id);
    ids.value = params.id
    get()

})
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    region: [],
    region1: [],
    region2: []
    // count: '',
    // date1: '',
    // date2: '',
    // delivery: false,
    // location: '',
    // type: [],
    // resource: '',
    // desc: '',
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
    count: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    location: [
        {
            required: true,
            message: 'Please select a location',
            trigger: 'change',
        },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>

<style scoped></style>